import {Image, StyleSheet, View, Text, TouchableOpacity, Modal, ScrollView} from 'react-native';
import {Stack, useLocalSearchParams, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useRef, useState} from "react";
import demoImage from "@/assets/demoImg/demo.png";
import Video, {VideoRef} from 'react-native-video';
import closeIcon from "@/assets/images/space/closeIcon.png"
import { getSpaceFacilityListByRequest } from "@/services/spaceServices";
import RenderHTML from 'react-native-render-html';
import * as React from "react";
import imgIcon from "@/assets/images/space/imgIcon.png";
import videoIcon from "@/assets/images/space/failitingVideoIcon.png"
import { WebView } from 'react-native-webview';

export default function facilityListScreen() {

    const [showVideo, setShowVideo] = useState(false);
    const [list, setList] = useState([]);
    const [watchUrl, setWatchUrl] = useState("https://www.w3schools.com/html/mov_bbb.mp4");
    const [key, setKey] = useState(0);
    const [newModal, setNewModal] = useState(false);
    const [htmlCotent, setHtmlContent] = useState("")

    const router = useRouter();
    const routerParams = useLocalSearchParams();
    // const videoRef = useRef<VideoRef>(null);
    // const background = require('demoVideo');

    useEffect(() => {
        getSpaceFacilityListByRequest(routerParams.spaceId)
            .then(res => {
                setList(res?.data?.facilityList)
                console.log('res', res)
            })
            .catch(err => {
                console.log('err', err)
            })
    }, []);

    const goVideo = function (index) {
        router.push(`/bVideo/${JSON.stringify(`${index},${routerParams.spaceId}`)}`)
    };



    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    title: '设施介绍', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={styles.videoListContainer}>
                <ScrollView style={{ height: "100%", width: "100%" }}>
                    {
                        list.map((item: any, index: number) => {
                            return (
                                <>
                                    <View style={styles.videoItem}>
                                        <View style={styles.banner}>
                                            <Image source={{ uri: item?.coverUrl }} style={{ width: "100%", height: "100%" }} />
                                        </View>
                                        <View style={styles.videoItemRight}>
                                            <View style={styles.title}>
                                                <Text style={styles.titleText} numberOfLines={2}>{ item?.name }</Text>
                                            </View>

                                            <View style={styles.date}>
                                                <TouchableOpacity onPress={() => {
                                                    setHtmlContent(item?.intro)
                                                    setNewModal(true)
                                                }}>
                                                    <View style={styles.itemFotter}>
                                                        <View style={styles.fotterIcon}>
                                                            <Image source={imgIcon} style={{ width: "100%", height: "100%" }}/>
                                                        </View>
                                                        <View style={styles.footerContent}>
                                                            <Text style={styles.footerContentText}>图文</Text>
                                                        </View>
                                                    </View>
                                                </TouchableOpacity>
                                                <TouchableOpacity onPress={() => goVideo(index)}>
                                                    <View style={styles.itemFotter}>
                                                        <View style={styles.fotterIcon}>
                                                            <Image source={videoIcon} style={{ width: "100%", height: "100%" }}/>
                                                        </View>
                                                        <View style={styles.footerContent}>
                                                            <Text style={styles.footerContentText}>视频</Text>
                                                        </View>
                                                    </View>
                                                </TouchableOpacity>
                                            </View>
                                        </View>
                                    </View>
                                </>
                            )
                        })
                    }
                </ScrollView>
            </View>

            <Modal
                animationType="fade"
                transparent={true}
                visible={showVideo}
            >
                <View style={styles.modalContainer}>
                    <View style={styles.VideoView}>
                        <TouchableOpacity onPress={() => setShowVideo(false)}>
                            <View style={styles.closeIcon}>
                                <Image source={closeIcon} style={{ width: "100%", height: "100%" }} />
                            </View>
                        </TouchableOpacity>
                        <Video
                            key={key}
                            source={{ uri: watchUrl }}
                            // Store reference
                            // ref={videoRef}
                            // Callback when remote video is buffering
                            style={styles.backgroundVideo}
                            repeat={true}       // 循环播放
                            controls={true}     // 显示播放控制器
                            paused={false}      // 自动播放
                            onError={(error) => console.log('Video Error:', error)}
                        />
                    </View>
                </View>

            </Modal>

            <Modal
                animationType="fade"
                transparent={true}
                visible={newModal}
            >
                <TouchableOpacity onPress={() => setNewModal(false)} activeOpacity={1}>
                    <View style={styles.toolsModalContainer}></View>
                </TouchableOpacity>
                <View style={styles.toolsWrap}>
                    <View style={[styles.modalHeader, { padding: 12, }]}>
                        <View style={styles.modalheaderTitle}>
                            <Text style={styles.modalheaderTitleText}>设施介绍</Text>
                        </View>
                        <TouchableOpacity onPress={() => setNewModal(false)}>
                            <AntDesign name="close" size={18} color="black" />
                            {/*<View style={styles.closeIcon}>*/}
                            {/*    <Image source={closeIcon} style={{ width: "100%", height: "100%" }}/>*/}
                            {/*</View>*/}
                        </TouchableOpacity>
                    </View>
                    <ScrollView style={{ maxHeight: 600 }}>
                        <RenderHTML
                            contentWidth={600} // 替换为你的屏幕宽度
                            source={{ html: htmlCotent }}
                        />
                    </ScrollView>
                </View>
            </Modal>

            {/*<Modal*/}
            {/*    animationType="fade"*/}
            {/*    transparent={true}*/}
            {/*    visible={true}*/}
            {/*>*/}
            {/*    <TouchableOpacity onPress={() => setNewModal(false)} activeOpacity={1}>*/}
            {/*        <View style={styles.toolsModalContainer}></View>*/}
            {/*    </TouchableOpacity>*/}
            {/*    <View style={{ flex: 1 }}>*/}
            {/*        <WebView*/}
            {/*            source={{ uri: 'https://player.bilibili.com/player.html?bvid=BV1eE421P7HK' }}*/}
            {/*            style={{ width: '100%', height: 360 }}*/}
            {/*            allowsFullscreenVideo*/}
            {/*        />*/}
            {/*    </View>*/}
            {/*</Modal>*/}
        </View>

    );
}

const styles = StyleSheet.create({
    videoListContainer: {
        paddingHorizontal: 14,
    },
    videoItem: {
        flexDirection: "row",
        marginBottom: 9,
        backgroundColor: "#fff",
        borderRadius: 10,
        padding: 10,
    },
    banner: {
        width: 132,
        height: 80,
        borderRadius: 6,
        overflow: "hidden",
    },
    videoItemRight: {
        marginLeft: 10,
        position: "relative",
    },
    date: {
        position: "absolute",
        bottom: 0,
        flexDirection: "row",
    },
    dateText: {
        color: "#9C9EAC",
    },
    title: {
        position: "absolute",
        top: 0,
    },
    titleText: {
        width: 200,
    },
    modalContainer: {
        backgroundColor: 'rgba(0,0,0, 1)',
        height: "100%",
        flex: 1,
    },
    backgroundVideo: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    },
    VideoView: {
        width: "100%",
        height: 400,
        position: "relative",
        top: 200,
        // backgroundColor: "#fff",
    },
    closeIcon: {
        width: 26,
        height: 26,
        position: 'absolute',
        top: -40,
        left: 15,
        // backgroundColor: "#fff",
    },
    toolsModalContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",

    },
    toolsWrap: {
        backgroundColor: "#fff",
        position: "absolute",
        bottom: 0,
        width: "100%",
        // padding: 12,
        borderTopLeftRadius: 8,
        borderTopRightRadius: 8,
        paddingBottom: 33,
    },
    modalHeader: {
        flexDirection: "row",
        marginTop: 8,
    },
    modalheaderTitle: {
        flex: 1,
    },
    modalheaderTitleText: {
        textAlign: "center",
        fontSize: 18,
    },
    closeIcon: {
        width: 12,
        height: 12
    },
    toolTitle: {
        marginTop: 12,
        flexDirection: "row",
    },
    toolTitleText: {
        fontSize: 18,
        position: "relative",
        fontWeight: "bold",
        zIndex: 9,
        display: "flex",
    },
    heng: {
        width: "100%",
        height: 6,
        backgroundColor: "#EC6138",
        position: "relative",
        left: 0,
        bottom: 8,
    },
    itemFotter: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center",
        paddingVertical: 4,
        paddingHorizontal: 12,
        borderWidth: 1,
        borderColor: "#EC6138",
        borderRadius: 50,
        marginRight: 10,
    },
    fotterIcon: {
        width: 10,
        height: 11,
        marginRight: 2,
    },
    footerContent: {

    },
    footerContentText: {
        fontSize: 12,
        color: "#EC6138"
    },
});
